﻿<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>发电预测可视化系统</title>
	<script type="text/javascript" src="js1/jquery.js"></script>
	<script type="text/javascript" src="js1/echarts.min.js"></script>
	<script type="text/javascript" src="js1/china.js"></script>
	<script type="text/javascript" src="js1/js.js"></script>
	<script type="text/javascript" src="js1/Bubble.js"></script>
	<script type="text/javascript" src="js/bmap.min.js"></script>
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=2.0&ak=PttOWfapivN0csW3hYjukyhmLyjD5k0x"></script>
	<link rel="stylesheet" href="css1/style.css">
</head>

<body>
	<div class="head clearfix">


		<h1 class="pulll_left">发电预测可视化系统</h1>
		<div class="menu menu2 pulll_left">
			<ul>
				<li class="this"><a href="#" class="this">首页总览</a></li>
				<li><a href="index1.html">光伏发电</a></li>
				<li><a href="index2.html">水利发电</a></li>
				<li><a href="index3.html">环境监测</a></li>
				<li><a href="index4.html">人员概况</a></li>

				<!-- <li><a href="#">标题样式</a></li> -->

			</ul>
		</div>

		<div class="time" id="showTime">2018/6/12 17:00:12</div>
		<script>
			var t = null;
			t = setTimeout(time, 1000);//開始运行
			function time() {
				clearTimeout(t);//清除定时器
				dt = new Date();
				var y = dt.getFullYear();
				var mt = dt.getMonth() + 1;
				var day = dt.getDate();
				var h = dt.getHours();//获取时
				var m = dt.getMinutes();//获取分
				var s = dt.getSeconds();//获取秒
				document.getElementById("showTime").innerHTML = y + "/" + mt + "/" + day + " " + h + ":" + m + ":" + s + "";
				t = setTimeout(time, 1000); //设定定时器，循环运行     
			}

		</script>
	</div>
	<div class="mainbox">

		<ul class="clearfix nav1">
			<li style="width: 22%">
				<div class="box">
					<div class="tit">发电总览</div>
					<div class="boxnav" style="height: 200px;">
						<table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<th>发电设备</th>
									<th>计划完成</th>
									<th>实际完成</th>
									<th>增长率</th>


								</tr>
								<tr>
									<td>光伏发电设备1</td>
									<td><span class="text-w">1000</span></td>
									<td><span class="text-b">908</span></td>
									<td>
										<div class="text-d">↑12%</div>
									</td>
								</tr>
								<tr>
									<td>光伏发电设备2</td>
									<td><span class="text-w">1000</span></td>
									<td><span class="text-b">959</span></td>
									<td>
										<div class="text-s">↓12%</div>
									</td>
								</tr>
								<tr>
									<td>水利发电设备1</td>
									<td><span class="text-w">1000</span></td>
									<td><span class="text-b">982</span></td>
									<td>
										<div class="text-d">↑12%</div>
									</td>
								</tr>
								<tr>
									<td>水利发电设备2</td>
									<td><span class="text-w">1000</span></td>
									<td><span class="text-b">924</span></td>
									<td>
										<div class="text-s">↓12%</div>
									</td>
								</tr>
								<tr>
									<td>水利发电设备3</td>
									<td><span class="text-w">1000</span></td>
									<td><span class="text-b">901</span></td>
									<td>
										<div class="text-d">↑12%</div>
									</td>
								</tr>

							</tbody>
						</table>
					</div>
				</div>
				<div class="box">
					<div class="tit">发电量对比</div>
					<div class="boxnav" style="height: 250px;">
						<div class="" style="height: 190px" id="echart1"></div>
						<div class="leidanav">
							<ul class="clearfix">
								<li><span>光伏发电设备1</span>
									<p>143</p>
								</li>
								<li><span>光伏发电设备2</span>
									<p>140</p>
								</li>
								<li><span>水利发电设备1</span>
									<p>128</p>
								</li>
								<li><span>水利发电设备2</span>
									<p>150</p>
								</li>
								<li><span>水利发电设备3</span>
									<p>112</p>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</li>
			<li style="width: 56%">

				<div class="box">
					<div class="boxnav mapc" style="height: 550px; position: relative">
						<!-- <div class="mapnav">
							<ul>
								<li>
									<div><span>光伏发电</span>
										<p>869</p>
									</div>
								</li>
								<li>
									<div><span>水利发电</span>
										<p>924</p>
									</div>
								</li>
								<li>
									<div><span>风能发电</span>
										<p>798</p>
									</div>
								</li>
								<li>
									<div><span>核能发电</span>
										<p>824</p>
									</div>
								</li>
								<li>
									<div><span>其他发电</span>
										<p>854</p>
									</div>
								</li>
							</ul>
						</div> -->
						<div class="mapnav2">

							<div class="box">
								<div class="tit">近六月发电增幅</div>
								<div class="boxnav" style="height: 130px;" id="sysx">


								</div>
								<div class="leidanav leidanav3" style="margin-bottom: 15px;">
									<ul class="clearfix">
										<li><span>发电总量</span>
											<p>1280</p>
										</li>
										<li><span>发电增幅</span>
											<p>1040</p>
										</li>
										<li><span>发电总量</span>
											<p>2800</p>
										</li>
										<li><span>发电增幅</span>
											<p>1980</p>
										</li>
									</ul>
								</div>

							</div>
						</div>
						<div class="map" id="map"></div>

						<script>
							$(".mapbtn a").hover(function () {
								var ind = $(this).index()
								$(".mapnav ul").eq(ind).show().siblings().hide()
							})
						</script>
					</div>
				</div>

			</li>
			<li style="width: 22%">

				<div class="box">
					<div class="tit">光伏水利对比</div>
					<div class="boxnav" id="echart3" style="height: 200px;">

					</div>
				</div>
				<div class="box">
					<div class="tit">发电关注度</div>
					<div class="boxnav" style="height: 250px;">
						<div style="height: 200px; float: left; width: 40%; padding: 0 5px;">
							<div class="tit02 text-b">热门话题榜</div>
							<div class="huati">
								<ul>
									<li>1.光伏发电 <span class="text-s">↑2167</span></li>
									<li>2.水利发电 <span class="text-s">↑1124</span></li>
									<li>3.风能发电 <span class="text-d">↓1267</span></li>
									<li>4.核能发电 <span class="text-d">↓1345</span></li>
									<li>5.其他发电 <span class="text-d">↓2831</span></li>
								</ul>
							</div>
						</div>

						<div style="height: 200px; float: left; width: 60%">

							<div class="text-b tit02" style="text-align: center;">关键词 -- 发电</div>
							<div class="tagcloud">
								<!-- bo大小 co颜色 -->
								<a class="b01 co01" href="https://gitee.com/iGaoWei/big-data-view">大数据</a>
								<a class="b02 co02" href="https://gitee.com/iGaoWei/big-data-view">大数据</a>
								<a class="b03 co05" href="https://gitee.com/iGaoWei/big-data-view">大数据</a>
								<a class="b04 co02" href="https://gitee.com/iGaoWei/big-data-view">大数据</a>
								<a class="b03 co05" href="https://gitee.com/iGaoWei/big-data-view">大数据</a>
							</div>
							<script type="text/javascript">
								/*3D标签云*/
								tagcloud({
									selector: ".tagcloud",  //元素选择器
									fontsize: 6,       //基本字体大小, 单位px
									radius: 40,         //滚动半径, 单位px 页面宽度和高度的五分之一
									mspeed: "slow",   //滚动最大速度, 取值: slow, normal(默认), fast
									ispeed: "slow",   //滚动初速度, 取值: slow, normal(默认), fast
									direction: 0,     //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
									keep: false          //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
								});
							</script>
						</div>
					</div>
				</div>

			</li>
		</ul>

		<div class="box" style="padding: 20px 0;">
			<ul class="clearfix nav2 ">
				<li style="width:25%">
					<div class="tit01">发电占比</div>
					<div class="" id="">
						<div style="float: left; width: 50%; height: 170px" id="fb01"></div>
						<div style="float: left; width: 50%; height: 170px" id="fb02"></div>

					</div>
					<div class="leidanav leidanav2">
						<ul class="clearfix">
							<li><span style="font-size: 12px;">总发电量</span>
								<p>2285</p>
							</li>
							<li><span style="font-size: 12px;">光伏水利</span>
								<p>1408</p>
							</li>
							<li><span style="font-size: 12px;">风能核能</span>
								<p>828</p>
							</li>

						</ul>
					</div>
				</li>
				<li style="width:25%">
					<div class="tit01">发电往年对比</div>
					<div class="ftechart" id="echart4"></div>
				</li>
				<li style="width:25%">
					<div class="tit01">发电完成量</div>
					<div class="" style="height:100%;display: flex; align-items: center;">
						<div style="float: left; width: 50%; height: 100%" class="wancheng">
							<div><span>已完成电力</span>
								<h3>1835<i></i></h3>
							</div>
							<div class="yuan">
								<span>59%</span>
							</div>
						</div>
						<div style="float: left; width: 50%; height: 50%" id="myd1"></div>



					</div>

				</li>
				<li style="width:25%">
					<div class="tit01">发电类别</div>

					<div class="" id="">
						<div style="float: left; width: 50%; height: 200px" id="fb03"></div>
						<div style="float: left; width: 50%; height: 200px" id="fb04"></div>

					</div>

				</li>
			</ul>
		</div>


	</div>
</body>
<script>
	var sang = echarts.init(document.querySelector('.map'))
	var data = [

		{ name: '大庆', value: 279 },
		{ name: '雅安市', value: 200 },
		{ name: '天全胜利电站', value: 110 },
		{ name: '禁门关电站', value: 110 },
		{ name: '白沙河电站', value: 110 },


	];
	var geoCoordMap = {

		大庆: [125.03, 46.58],
		雅安市: [103.04, 30.02],
		天全胜利电站: [102.81, 30.03],
		禁门关电站: [102.73, 30.08],
		白沙河电站: [102.7, 30.25],
	};
	var convertData = function (data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var geoCoord = geoCoordMap[data[i].name];
			if (geoCoord) {
				res.push({
					name: data[i].name,
					value: geoCoord.concat(data[i].value)
				});
			}
		}
		return res;
	};
	function renderItem(params, api) {
		var coords = [

		];
		var points = [];
		for (var i = 0; i < coords.length; i++) {
			points.push(api.coord(coords[i]));
		}
		var color = api.visual('color');
		return {
			type: 'polygon',
			shape: {
				points: echarts.graphic.clipPointsByRect(points, {
					// x: params.coordSys.x,
					// y: params.coordSys.y,
					width: params.coordSys.width,
					height: params.coordSys.height
				})
			},
			style: api.style({
				fill: color,
				stroke: echarts.color.lift(color)
			})
		};
	}
	option = {
		backgroundColor: 'transparent',
		title: {
			text: '雅安水电站情况',
			top: '2%',
			left: '2%',
			textStyle: {
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'item'
		},
		bmap: {
			center: [103, 30],
			zoom: 11,
			roam: false,
			mapStyle: {
				styleJson: [
					{
						featureType: 'highway',
						elementType: 'geometry.fill',
						stylers: {
							color: '#000',
							lightness: 1
						}
					},
					{
						featureType: 'highway',
						elementType: 'geometry',
						stylers: {
							color: '#000'
						}
					},
					{
						featureType: 'label',
						elementType: 'all',
						stylers: {
							visibility: 'off'
						}
					},
					{
						featureType: 'land',
						elementType: 'all',
						stylers: {
							color: '#092649'
						}
					},
					{
						featureType: 'boundary',
						elementType: 'geometry',
						stylers: {
							color: '#000'
						}
					},
					{
						featureType: 'manmade',
						elementType: 'all',
						stylers: {
							visibility: 'off'
						}
					},

					{
						featureType: 'arterial',
						elementType: 'labels',
						stylers: {
							visibility: 'off'
						}
					},
					{
						featureType: 'boundary',
						elementType: 'geometry.fill',
						stylers: {
							color: '#000'
						}
					},
					{
						featureType: 'building',
						elementType: 'all',
						stylers: {
							color: '#1a5787'
						}
					},
				]
			}
		},
		series: [
			{

				type: 'scatter',
				coordinateSystem: 'bmap',
				data: convertData(data),
				encode: {
					value: 2
				},
				symbolSize: function (val) {
					return val[2] / 10;
				},
				label: {
					formatter: '{b}',
					position: 'right',

				},
				itemStyle: {
					color: '#ddb926'
				},
				emphasis: {
					label: {
						show: true
					}
				}
			},
			{
				name: 'Top 1',
				type: 'effectScatter',
				coordinateSystem: 'bmap',
				data: convertData(
					data
						.sort(function (a, b) {
							return b.value - a.value;
						})
						.slice(0, 6)
				),
				encode: {
					value: 2
				},
				symbolSize: function (val) {
					return val[2] / 10;
				},
				showEffectOn: 'emphasis',
				rippleEffect: {
					brushType: 'stroke'
				},
				hoverAnimation: true,
				label: {
					formatter: '{b}',
					position: 'right',
					show: true,
					color: '#fff',
					fontSize: '18'
				},
				itemStyle: {
					color: '#f4e925',
					shadowBlur: 10,
					shadowColor: '#333'
				},
				zlevel: 1
			},
			{
				type: 'custom',
				coordinateSystem: 'bmap',
				renderItem: renderItem,
				itemStyle: {
					opacity: 0.5
				},
				animation: false,
				silent: true,
				data: [0],
				z: -10
			}
		]
	};
	sang.setOption(option)
</script>

</html>